<template>
    <div class="adderss-box">
        <img src="http://img.xianyufanshen.net//pay/images/zhifushibai@2x.png" alt="">
        <h2 v-if="lang=='zh' ">抱歉，支付失败！</h2>
        <h2 v-else>Sorry, payment failed！</h2>
        <div v-if="lang=='zh' " class="btn1" @click="back">继续支付</div>
        <div v-else class="btn1" @click="back">Continue to pay </div>
        <!-- <div v-if="type==3" class="btn" @click="goSelect">放弃支付，返回选择藏品</div> -->
        <div v-if="lang=='zh' " class="btn" @click="goIndex">返回首页</div>
        <div v-else class="btn" @click="goIndex">Back to home</div>
    </div>
</template>
<script>
export default {
    name:'payFail',
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语  
           userId:0,//用户id 
           type:1,//type=1购买，2置换 3、发布藏品
           id:0, // 订单Id
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
         //获得类型 type=1购买，2置换 3、发布藏品
        if(this.$route.query.type && this.$route.query.type > 0){
            this.type = this.$route.query.type;
        }
        //获取具体订单ID
        if(this.$route.query.id){
            this.id = this.$route.query.id;
        }
    },
    //
    methods:{
        //到我的购买/我的置换--订单详情
        back(){
            //购买订单详情		
            if(this.type == 1){
                let para = {};
                let title = '';
                if(this.lang == 'zh')
                    title = '订单详情';
                else
                    title = 'Order Details';
                para.title = title;//必须参数
                para.id = this.id;//要跳转对象的id 不是必须参数
                para.url = "/buyerpayBail?userId="+this.userId+"&lang="+this.lang+"&id="+this.id; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
                para.back = 'myGoods'; //非必须参数  跳转页的“返回”---跳转至个人中心主页
                this.interaction.hLink(para);
            }else if(this.type == 2){
                //置换订单详情
                let para = {};
                let title = '';
                if(this.lang == 'zh')
                    title = '订单详情';
                else
                    title = 'Order Details';
                para.title = title;//必须参数
                para.id = this.id;//要跳转对象的id 不是必须参数
                para.url = "/changepayBail?userId="+this.userId+"&lang="+this.lang+"&id="+this.id; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
                para.back = 'myReplacement'; //非必须参数  跳转页的“返回”---跳转至个人中心主页
                this.interaction.hLink(para);
            }else if(this.type == 3){
                //发布藏品 交审核费失败
                let para = {};
                para.isRefresh = false;
                this.interaction.hReturn(para);
            }


        },
        //返回首页
        goIndex(){
            let para = {};
            para.linkType = "index";
            this.interaction.hLinkToApp(para);	
        },
    }
    
}
</script>

<style lang="stylus" scoped>
.adderss-box{
    width :100%;
    height:100%;
    background :#fff;
    text-align:center;
    position:fixed;
    bottom :0;
    img{
        width:1.466667rem;
        height:1.466667rem;
        margin :0 auto;
        margin-top :1.066667rem;
    }
    h2{
        font-family:PingFangSC-Regular;
        font-size:.48rem;
        color:#494949;
        letter-spacing:.006667rem;
        text-align:center;
        margin-top :.266667rem;
        margin-bottom :1.333333rem;
    }
    p{
       font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#494949;
        letter-spacing:.005067rem;
        text-align:center;
        line-height:.693333rem;
    }
    .btn{
        border:2px solid #cb9c57;
        border-radius:100px;
        width:6.426667rem;
        height:.96rem;
        line-height :.96rem;
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        text-align:center;
        margin :0 auto;
        margin-top :.533333rem;
        
    }
     .btn1{
        border:2px solid #cb9c57;
        border-radius:100px;
        width:6.426667rem;
        height:.96rem;
        line-height :.96rem;
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        text-align:center;
        margin :0 auto;
        margin-top :2rem;
        background:#cb9c57;
        color:#ffffff;
    }
}
</style>


